<template>
  <div class="mid-block1"  style="width: 1000px; height: 500px; margin-bottom:10px ;"  >
    <div class="controls"  :style="controlsbut" >
      <button @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl()">↑</button>
      <button @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl()">↓</button>
      <button @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl()">←</button>
      <button @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl()">→</button>
      <button class="iconfont icon-shexiangtou_shiti" @click="clickStartRecord"></button>
      <button class="iconfont icon-guanbishipin" @click="clickStopRecord"></button>
      <button class="iconfont icon-paizhao" @click="clickCapturePic"></button>
      <!-- <button  @click="clickGetLocalCfg">获取本地参数</button> -->
      <!-- <button  @click="jump">更多视频</button> -->
    </div>
    <!-- 视频 -->
    <div :id="'playWnd'+indexx" ref="mid_block1"  :style=videostyle></div>  
    <div  style="float: right; width: 40px; height: 470px;  ">
      <div style="   top:-15px; width: 40px; height: 470px; background-color: rgb(6, 7, 16);  ">
        <div class="bigbtn" v-for="(item, index) in playerList" :style="{height:100/playerList.length+'%'}">
          <!-- <div class="imgx" @click="showBofang(item)" >  {{ item.name }}
          </div> -->
          <button class="btn2" @click="showBofang(item)">{{ item.name }}</button>
        </div>
        <!-- <ul>
          <li v-for="(item, index) in playerList" style="margin-top: 20px;  height: 140px;width:40px; margin-top 5px ; margin-left: 5px;">
            <span style="color: #ffffff; width: 40px;text-align: center; margin: auto;padding-left: 70px;">  {{ item.name }}</span>
          </li>
        </ul> -->
      </div>
      <div  style="  bottom: 0px; width: 190px; height: 30px; "></div>
    </div>
  
  </div>

</template>
<script>
import { postHandle } from "@/api";
export default {
  name: "carNvrVideo",
  components: {},
  data() {
    return {
      // dom对象
      // mid_block1:null,
      playerList:[],
      loginList:[],
      onloginx:{
        szDeviceIdentify:"",
        iRtspPort:"",
        iDevicePort:"",
        tongdao:""
      },
      szInfo: "",
      g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
      g_oLocalConfig: null, //本地配置

      //错误码
      //通用错误
      ERROR_CODE_UNKNOWN: 1000, //未知错误
      ERROR_CODE_NETWORKERROR: 1001, //网络错误
      ERROR_CODE_PARAMERROR: 1002, //缺少插件元素

      //登录模块
      ERROR_CODE_LOGIN_NOLOGIN: 2000, // 未登录
      ERROR_CODE_LOGIN_REPEATLOGIN: 2001, //设备已登录，重复登录
      ERROR_CODE_LOGIN_NOSUPPORT: 2002, //当前设备不支持Digest登录

      //预览播放
      ERROR_CODE_PLAY_PLUGININITFAIL: 3000, //插件初始化失败
      ERROR_CODE_PLAY_NOREPEATPLAY: 3001, //当前窗口已经在预览
      ERROR_CODE_PLAY_PLAYBACKABNORMAL: 3002, //回放异常
      ERROR_CODE_PLAY_PLAYBACKSTOP: 3003, //回放停止
      ERROR_CODE_PLAY_NOFREESPACE: 3004, //录像过程中，硬盘容量不足
      rowList: {},
      playWndHeight: 600,
      playWndWidth: 960,
      hkvInfo: {
        ip: "192.168.0.108",
        port: 80,
        username1: "admin",
        password1: "123456",
        nvrPrechannel: "",
      },
      mySelectWnd: 0,
      //当前选中的窗口
      g_bPTZAuto: false,
      iProtocol: 1,
      loginLoading: false,
      startPlayLoading: false,
      bZeroChannel: false,
      iRtspPort: 0,
      index: 0,
      iWndowType: null,
      videoData: [
        {
          ip: "192.168.0.108",
          port: 80,
        },
       
      ],
      ua: navigator.userAgent.toLocaleLowerCase(),
    };
  },
  props:{
    width:{type:String,default:"960px"},
    indexx:{type:String}
  },
  computed: {
    entSpaceId() {
      return this.$store.getters.entSpaceId;
    },
    spaceId() {
      return this.$store.getters.spaceId;
    },
    videostyle(){
      return {float:"left",width:this.$props.width, height: "470px",color: "aliceblue"}
    },
    controlsbut(){
      return {height: "30px",width:this.$props.width }
    }
  },
  created() {
    // this.videoData = JSON.parse(this.$route.query.videoData);
    if (this.videoData.length <= 1) {
      this.iWndowType = 1;
    } else if (this.videoData.length > 1 && this.videoData.length <= 4) {
      this.iWndowType = 2;
    }
    this.getData();
  },
  mounted() {
    this.videoChange();
      // 滚动事件  
      // window.addEventListener("scroll",this.setscroll(this.handle,1000))
  },
  destroyed() {
    this.clickStopRealPlay();
    this.onLogout();
    // 卸载事件
    // window.removeEventListener("scroll",this.setscroll(this.handle,0))
  },
  methods: {
    jump(){
      this.$router.push("/ProjectScreenPage")
    },
    // 控制移动
    mouseDownPTZControl(iPTZIndex){
    
      let g_bPTZAuto = false;
      let g_iWndIndex=0
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
        // bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
        iPTZSpeed = $("#ptzspeed").val();

    // if (bZeroChannel) {// 零通道不支持云台
    //     return;
    // }
    
    if (oWndInfo != null) {
        if (9 == iPTZIndex && g_bPTZAuto) {
            iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动
        } else {
            g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭
        }

        WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
            iPTZSpeed: iPTZSpeed,
            success: function (xmlDoc) {
                if (9 == iPTZIndex && g_bPTZAuto) {
                    // showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
                } else {
                    // showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台成功！");
                }
                if (9 == iPTZIndex) {
                    g_bPTZAuto = !g_bPTZAuto;
                }
            },
            error: function (oError) {
                // showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台失败！", oError.errorCode, oError.errorMsg);
            }
        });
    }
    },
    // 控制停
    mouseUpPTZControl(){
      WebVideoCtrl.I_GetWindowStatus(0);
      
        WebVideoCtrl.I_PTZControl(1, true, {
            success: function (xmlDoc) {
                // showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
            },
            error: function (oError) {
                // showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台失败！", oError.errorCode, oError.errorMsg);
            }
        });
    
    },
// 开始录像
clickStartRecord(szType){
  console.log("开始");
  let g_szRecordType = "";
  let oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
     var szInfo = "";
    g_szRecordType = szType;
    var szChannelID = $("#channels").val(),
            szFileName = oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();
            WebVideoCtrl.I_StartRecord(szFileName, {
            bDateDir: true, //是否生成日期文件
            success:  ()=> {
              this.$message({
            showClose: true,
            message: "开始录像",
            type: "success",
          });
            },
            error: function (oError) {
                // if ('realplay' === szType) {
                //     szInfo = " 开始录像失败！";
                // } else if ('playback' === szType) {
                //     szInfo = " 开始剪辑失败！";
                // }
                // showOPInfo(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
            }
        });
},
// 结束录像
clickStopRecord(){
  console.log("结束");
  WebVideoCtrl.I_StopRecord({
    iWndIndex:0,
    success:()=>{
      this.$message({
            showClose: true,
            message: "结束录像",
            type: "warning",
          });
    }
  })
},
    // 拍照
   async clickCapturePic(szType){
    console.log("抓图");
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
        szInfo = "";

    if (oWndInfo != null) {
        var oLocalConfig = await WebVideoCtrl.I_GetLocalCfg();
        var szCaptureFileFormat = "0";
        if (oLocalConfig) {
            szCaptureFileFormat = oLocalConfig.captureFileFormat;
        }

        var szChannelID = $("#channels").val();
        var szPicName = oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();
        //如果是回放抓图，需要增加如下前缀："playback_"
        if ("playback" === szType) {
            szPicName = "playback_" + oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();
        }
        
        szPicName += ("0" === szCaptureFileFormat) ? ".jpg": ".bmp";

        WebVideoCtrl.I_CapturePic(szPicName, {
            bDateDir: true  //是否生成日期文件
        }).then(()=>{
          this.$message({
            showClose: true,
            message: "抓图成功",
            type: "success",
          });
        },()=>{
          this.$message({
            showClose: true,
            message: "抓图失败",
            type: "success",
          });
        })
          
        // }, function(oError){
        //     szInfo = " 抓图失败！";
        //     // showOPInfo(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
        // });
    }
    },
    // 获取本地参数
 clickGetLocalCfg() {
    WebVideoCtrl.I_GetLocalCfg().then((oLocalConfig) => {
       let g_oLocalConfig = oLocalConfig;
        console.log("g_oLocalConfig",g_oLocalConfig);
        $("#netsPreach").val(oLocalConfig.buffNumberType);
        $("#wndSize").val(oLocalConfig.playWndType);
        $("#rulesInfo").val(oLocalConfig.ivsMode);
        $("#captureFileFormat").val(oLocalConfig.captureFileFormat);
        $("#packSize").val(oLocalConfig.packgeSize);
        $("#recordPath").val(oLocalConfig.recordPath);
        $("#downloadPath").val(oLocalConfig.downloadPath);
        $("#previewPicPath").val(oLocalConfig.capturePath);
        $("#playbackPicPath").val(oLocalConfig.playbackPicPath);
        $("#devicePicPath").val(oLocalConfig.deviceCapturePath);
        $("#playbackFilePath").val(oLocalConfig.playbackFilePath);
        $("#protocolType").val(oLocalConfig.protocolType);
        $("#secretKey").val("\x7F\x7F\x7F\x7F\x7F\x7F\x7F\x7F");
        // showOPInfo("本地配置获取成功！");
    }, (oError) => {
        var szInfo = "本地配置获取失败！";
        showOPInfo(szInfo, oError.errorCode, oError.errorMsg);
    });
},
  // 窗口滚动
  // handle(){
  //  let scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop
  //    this.mid_block1=this.$refs.mid_block1  
  //  this.mid_block1.style.marginTop=scrollTop+"px"
 
  //   console.log("this.$refs.mid_block1",this.$refs.mid_block1);
  //    this.marginTop="-"+scrollTop+"px"
  //   //  this.$refs.mid_block1.style.width=300+'px'
  //   console.log("this.marginTop",this.marginTop);
  // console.log("555");
  // this.$nextTick(()=>{
  //   console.log("this.marginTop",this.marginTop);
  //   this.initPlugin()
  // })
  //   },
    // 滚动防抖
  // setscroll(fn,wait){
  //   var timer = null;
  //   return function(){
  //       if(timer !== null){
  //           clearTimeout(timer);
  //       }
  //       timer = setTimeout(fn,wait); 
  //   }
  // },
    //1, ==========
    videoChange() {
      setTimeout(() => {
        this.videoInitPlugin(); // 初始化video界面
      }, 300);
    },
    showBofang(pp){
      console.log("pp",pp);
      //停止播放
      WebVideoCtrl.I_Stop();
      this.$message({     
            showClose: true,
            message: "正在切换摄像头《"+pp.name+"》。。。。。。。。。。。。",
            type: "success",  
       });
       this.onloginx={
        szDeviceIdentify:"",
        iRtspPort:"",
        iDevicePort:"",
        tongdao:""
      };
       var isDl=false;
       var loginw=null;
       console.log("this.loginList", this.loginList);
       this.loginList.forEach((element) => {
          console.log("element",element);
          if(element.szDeviceIdentify==pp.nwurl){
            isDl=true;
            loginw=element;
            this.onloginx=element;
          }
       })
       //判断是否登录  
       if(!isDl){
          //未登录执行登录
          this.onLogin(pp);
       }else if(isDl&&(loginw.iRtspPort==null||loginw.iRtspPort==null)){
           //未获取端口
           this.getDevicePort(loginw.szDeviceIdentify);
       }else if(isDl&&loginw.tongdao==null ){
           //未获取通道
           this.getChannelInfox(pp.nwurl,pp.nwtd);
       }else{
           console.log(loginw.szDeviceIdentify+"--"+loginw.iDevicePort+"--"+loginw.iRtspPort+"--"+loginw.tongdao);
           //执行播放
           this.startRealPlay(loginw.szDeviceIdentify,loginw.iDevicePort,loginw.tongdao);
       }  
    },
    handleSelectionChange() {},
    submitForm() {},
    getData() {
      postHandle("/api/v1/welder-sbtx-second/video-comb/list", {
        d: {
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.newSpaceId || this.spaceId,
            },
          ],
          sorts: [{ field: "sequence", isDesc: false }],
        },
      }).then((res) => {
        this.playerList = res.result;
        console.log("this.playerList",this.playerList);
      });

    },
    // 登录
    onLogin( player) {
      console.log("player",player);
      var that = this;
      that.loginLoading = true;
      var szDeviceIdentify =
      player.nwurl+"--"+player.nwtd+"--"+player.appKey+  player.appSecret;        
      // 登录设备
     
      this.$nextTick(() => {
        var aaa = WebVideoCtrl.I_Login(
          player.nwurl,
          1,
          player.nwtd,
          player.appKey,
          player.appSecret,
          {
            timeout: 3000,
            success: function (xmlDoc) {
              that.$message({
                message: szDeviceIdentify+"登录成功",
                type: "success",
              });
              //加载端口
              that.getDevicePort( player.nwurl);
              setTimeout(function () {
                setTimeout(function () {
                  //加载通道
                  that.getChannelInfox(player.nwurl,player.nwtd);
                }, 1000);
              
              }, 10);
            },
            error: function (oError) {
             
              console.log(that.ERROR_CODE_LOGIN_REPEATLOGIN ===parseInt(oError.errorCode))
              console.log(that.ERROR_CODE_LOGIN_REPEATLOGIN+"---"+parseInt(oError.errorCode))
              if (that.ERROR_CODE_LOGIN_REPEATLOGIN ===parseInt(oError.errorCode)) {
                console.log(szDeviceIdentify+"已登录过");
                // that.$message({
                //   message: szDeviceIdentify+"已登录过",
                //   type: "warning",
                // });
                if(that.onloginx){
                  console.log(that.onloginx.szDeviceIdentify+"---"+that.onloginx.iRtspPort+"---"+that.onloginx.tongdao)
                  that.startRealPlay(that.onloginx.szDeviceIdentify,that.onloginx.iRtspPort,that.onloginx.tongdao)
                }
              } else {
                console.log(szDeviceIdentify+"登录失败！"+oError.errorCode+oError.errorMsg);
                that.$message({
                  message: szDeviceIdentify+"登录失败！"+oError.errorCode+oError.errorMsg,
                  type: "warning",
                });
              }
            },
          }
        );

        // 
        //         this.getDevicePort( "192.168.0.108");
      });
      // console.log(aaa);
    },
    // 退出
    onLogout() {
      this.videoData.forEach((element) => {
        var szDeviceIdentify = element.ip + "_" + element.port;
        var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
        if (0 == iRet) {
          //
          this.$message({
            //
            showClose: true,
            //
            message: "退出成功",
            //
            type: "success",
            //
          });
        } else {
          // this.$message({
          //   showClose: true,
          //   message: "退出失败",
          //   type: "error",
          // });
        }
      });
    },
    clickStartRealPlay() {
      console.log("开始预览", this.index);
      // 开始预览
      var that = this;
      that.startPlayLoading = true;
      var szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port;
      //debugger
      that.startRealPlay(
        szDeviceIdentify,
        this.index,
        that.hkvInfo.nvrPrechannel
      );
      that.startPlayLoading = false;
    },
  // 2
    videoInitPlugin() {
      var  that=this;
      this.$nextTick(() => {
        var iRet = WebVideoCtrl.I_CheckPluginInstall();
        if (iRet === -1) {
          // alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装");
          this.myFunction();
          return;
        } else {
        //  console.log(this.ua.match(/msie/));
          // this.browserType = "IE";

          that.initPlugin();

          
        }
      });
    },
  
    myFunction() {
      this.$confirm("您还未安装过插件，请下载后查看摄像", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
            window.location.href = "/WebComponentsKit.exe";
        }) 
    },
    // 3
    initPlugin() {
      var that=this;
      var asd = WebVideoCtrl.I_InitPlugin({
 
        bWndFull: true, //Wether support doule clicking to switch the full-screen mode: it's supported by default; true:support, false:not support
        iWndowType: 1,
        cbSelWnd: function (xmlDoc) {
          console.log("xmlDoc",xmlDoc);
          g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
          var szInfo = "the selected window index: " + g_iWndIndex;
          showCBInfo(szInfo);
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
          var szInfo = "present window number to zoom: " + iWndIndex;
          if (!bFullScreen) {
            szInfo = "present window number to restore: " + iWndIndex;
          }
          showCBInfo(szInfo);
        },
        cbEvent: function (iEventType, iParam1, iParam2) {
          if (2 == iEventType) {
            showCBInfo("window " + iParam1 + "playback finished!");
          } else if (-1 == iEventType) {
            showCBInfo("device " + iParam1 + "network error!");
          } else if (3001 == iEventType) {
            clickStopRecord(g_szRecordType, iParam1);
          }
        },
        // 初始化插入dom
        cbInitPluginComplete: function () {
          var acbc = WebVideoCtrl.I_InsertOBJECTPlugin("playWnd"+that.indexx).then(
            () => {
              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                  that.$message({
                      type: 'success',
                      message: "检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
                  });
                } else {
                  that.$message({
                      type: 'success',
                      message:"插件初始化成功"
                   });
                  if(that.playerList&&that.playerList.length>0){
                    that.onLogin(that.playerList[0]);
                    console.log("that.playerList[0]",that.playerList);
                  }
                }
              });
            },
            () => {
              that.$message({
                      type: 'success',
                      message:"插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
            });
            }
          );
          //console.log(acbc);
        },
      });
     // 

      // for (var i = 0; i < this.videoData.length; i++) {
      //   this.hkvInfo = this.videoData[i];
      //   //debugger
      //   this.index = i;
      //   this.onLogin();
      // }
    },
    // 获取端口
    getDevicePort(ip) {
      var that=this;
      var szDeviceIdentify =ip ;

      if (null == szDeviceIdentify) {
        return;
      }

      WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then(
        (oPort) => {
          that.$message({
              type: 'success',
              message:szDeviceIdentify + " 获取端口成功！"
          });
          console.log(that.onloginx.szDeviceIdentify)
          that.onloginx.szDeviceIdentify=ip;
         that.onloginx.iDevicePort=oPort.iDevicePort;
         that.onloginx.iRtspPort=oPort.iRtspPort; 
        },
        (oError) => {
          that.onLogin.szDeviceIdentify=szDeviceIdentify;
          that.onLogin.iDevicePort=null;
          that.onLogin.iRtspPort=null; 
          var szInfo = "获取端口失败！";
          that.$message({
              type: 'success',
              message:szDeviceIdentify + szInfo
          });
        }
      );
    },
    clickStopRealPlay: function () {
      for (var i = 0; i <= this.index; i++) {
        setTimeout(this.stopRealPlay(i), 1000);
      }
    },
// 停止播放
    stopRealPlay: function (iWndIndex) {
      var that = this;
      WebVideoCtrl.I_Stop({
        iWndIndex: iWndIndex,
        success: function () {
          //   that.$notify({
          //     title: "成功",
          //     message: "停止预览窗口" + iWndIndex + "成功",
          //     type: "success",
          //   });},error: function () {
          // that.$notify({
          //   title: "失败",
          //   message: "停止预览窗口" + iWndIndex + "失败",
          //   type: "error",
          // });
        },
      });
    },
    // 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率）
    getChannelInfox(ip,dk) {
      this.$nextTick(() => {
        var that = this;
        var szDeviceIdentify = ip ;
        // 数字通道
        that.hkvInfo.channels = [];
        console.log("获取通道。。"+szDeviceIdentify);
        WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("VideoInputChannel");
          var aacc="";
          $.each(oChannels, function (i) {
                var id = $(this).find("id").eq(0).text(),
                    name = $(this).find("name").eq(0).text();
                if ("" == name) {
                    name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                }
                aacc=id;
                //oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
            });
          that.onloginx.tongdao=aacc;
          that.$message({
              type: 'success',
              message:szDeviceIdentify +  " 获取模拟通道成功！"
          });
          that.startRealPlay(szDeviceIdentify,dk,aacc);
        },
        error: function (oError) {
          that.$message({
              type: 'warning',
              message:szDeviceIdentify +  " 获取模拟通道失败！"+oError.errorCode+ oError.errorMsg
          });
         // console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
        }
    });
    // // 数字通道
    // WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
    //     success: function (xmlDoc) {
            
    //       console.log(szDeviceIdentify + " 获取数字通道成功！");
    //     },
    //     error: function (oError) {
    //       console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
    //     }
    // });
    // // 零通道
    // WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
    //     success: function (xmlDoc) {
             
    //       console.log(szDeviceIdentify + " 获取零通道成功！");
    //     },
    //     error: function (oError) {
    //       console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
    //     }
    // });
      });
    },
    // 播放
    startRealPlay(szDeviceIdentify,dk,tongdao){
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(1),
      that=this,
        iRtspPort =dk,  //端口
        iChannelID = tongdao, //通道
        iStreamType =1,
        szInfo = "";
    if (null == szDeviceIdentify) {
        return;
    }
    that.loginList.push(that.onloginx);
    //  播放开始视频
    var startRealPlay = function () {
                                    //  设备标识ip-port
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
            iStreamType: iStreamType,  //码流类型
            iChannelID: iChannelID,   //播放通道号
            bZeroChannel: false, //是否播放零通道
            success: function () {
              that.$message({
                  type: 'success',
                  message:szDeviceIdentify+"预览画面成功。。。"
              });
                szInfo = "开始预览成功！";
                console.log(szDeviceIdentify + " " + szInfo);               
            },
            error: function (oError) {
              that.$message({
                  type: 'warning',
                  message:szDeviceIdentify +  " 开始预览失败！"+oError.errorCode+ oError.errorMsg
              });
              
            }
        });
    };
   
    if (oWndInfo != null) {// 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
            success: function () {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
    }
  },
};
</script>
<style lang="scss" scoped>
.playWnd {
  margin: 0 0 0 0;
  width: 960px;
  height: 500px;
}
.btn2{
  height: 100%;
  font-size: 25px;
  background-color: #06071C;
  color: #e5e5e5;
  border: none;
  padding: 1px;
  width: 0px;
  overflow: hidden;
  transition: all .5s ease;
}
.bigbtn{
  background-color: #06071C;
}
.bigbtn:hover .btn2{
  width: 40px;
  background-color:#06071C;

}
.controls{
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.controls button{
  border: none;
  box-sizing: border-box;
  height: 0px;
  flex: 1;
  overflow: hidden;
  transition: all .5s ease;
  // background-color:rgb(129, 130, 132) ;
  background-color:#06071C ;
  color: #e5e5e5;
}
.controls:hover button{
  height: 30px;
}

// .imgx{

//    border: 1px solid #ffffff;
//    background-color: rgb(129, 130, 132); 
//    color: #ffffff; width: 40px;
//    display: flex;
//    flex-direction: column;
//    height: 100%;  
//    font-size: 32px;
//    line-height:100%;
//    text-align: center;
//   justify-content: center;
// }
// .imgx:hover{
//   border: 1px solid #ffffff;
//    background-color: rgb(22, 26, 63); 
//    color: rgb(92, 213, 200); width: 40px;
//    height: 100%;  
//    margin: auto; 
//    font-size: 32px;
//    line-height:100%;
// }

.cbInfoDiv {
  float: left;
  width: 360px;
  margin-left: 16px;
  border: 1px solid #7f9db9;
}
.cbInfo {
  height: 200px;
  padding: 5px;
  border: 1px solid #7f9db9;
  word-break: break-all;
  overflow: scroll／auto;
}
.operate {
  margin-top: 24px;
}
.operate::after {
  content: "";
  display: block;
  clear: both;
}
.operate .btns {
  height: 32px;
}
.module {
  float: left;
  width: 120px;
  min-height: 290px;
  margin-left: 10px;
  padding: 16px 8px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
}
.module .item {
  margin-bottom: 4px;
}
.module .label {
  width: 150px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  text-align: right;
}
.module input[type="text"],
.module select {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0;
  width: 150px;
  min-height: 20px;
}
.module .btn {
  min-width: 80px;
  min-height: 24px;
  margin-top: 16px;
  margin-left: 158px;
}
.el-aside {
  margin: 0px;
  height: 84vh;
  color: #333;
  background-color: #0c0d0d;
}
.el-main {
  background-color: #0c0d0d;
  color: #333;
  text-align: center;
}
</style>
